<template>
  <div>
<button @click="state.count++">{{ state.count }}</button>
  </div>
</template>

<script setup>
import {ref, onBeforeMount,onBeforeUpdate,onMounted, onUpdated,onBeforeUnmount,onUnmounted } from 'vue';

const state=ref({count:1,age:18})

console.log('setup');

onBeforeMount(()=>{
  console.log('onBeforeMount');
})
onMounted(()=>{
  console.log('onMounted');
})
onBeforeUpdate(_=>{
console.log('onBeforeUpdate');

})
onUpdated(_=>{
console.log('onUpdated'); 
})

//💕 多个onMounted会执行多次,不会覆盖.这个是和vue2不一样的地方.
//为什么会设置多个onMounted呢?
//因为公司开发是二次开发,或者是多人开发,前人已经写好一个onMounted,而且很复杂,那么这个时候就单独再写一个onMounted.保证独立性
onMounted(()=>{
  console.log('onMounted2');
})

//在onMounted中,发Ajax请求,创建echarts.

//下面执行的时机是在组件销毁之前.比如路由跳转,组件销毁,都会执行.
onBeforeUnmount(()=>{
  console.log('onBeforeUnmount'); 
})
onUnmounted(()=>{
  console.log('onUnmounted'); 
})
</script>

<style lang="scss" scoped>

</style>